import {
  Button,
  Modal,
  Icon,
  TextField,
  IndexTable,
  LegacyCard,
  useIndexResourceState,
  Text,
  Badge,
  Thumbnail,
} from "@shopify/polaris";
import {
  SearchMinor,
  ChevronRightMinor,
  ArrowLeftMinor,
} from "@shopify/polaris-icons";
import { useState, useCallback, useEffect } from "react";
import styled from "./ChioceProduct.module.less";

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

const Mock2 = [
  {
    value: "BNXW",
    label: "百年西屋",
    name: "BNXW",
    lev: 2,
    id: "BNXW",
  },
];
const Mock3 = [
  {
    value: "eriodesign",
    label: "eriodesign",
    name: "Mock4",
    lev: 2,
    id: "eriodesign",
  },
];

const Mock4 = [
  {
    value: "rubber",
    label: "大/橡胶",
    name: "rubber",
    lev: 3,
    id: "rubber",
  },
  {
    value: "aa",
    label: "大/啊啊",
    name: "aa",
    lev: 3,
    id: "aa",
  },
];

const Mock = [
  {
    value: "everyProduct",
    label: "所有产品",
    name: "Mock4",
    lev: 1,
    id: "everyProduct",
  },
  {
    value: "hotProduct",
    label: "热门产品",
    name: "Mock4",
    lev: 1,
    id: "hotProduct",
  },
  {
    value: "productSeries",
    label: "产品系列",
    name: "Mock2",
    lev: 1,
    id: "productSeries",
  },
  {
    value: "productStyle",
    label: "产品类型",
    name: "productStyle",
    lev: 1,
    id: "productStyle",
  },
  { value: "label", label: "标签", name: "label", lev: 1, id: "label" },
  { value: "firm", label: "厂商", name: "Mock3", lev: 1, id: "firm" },
];

function ModalExample({ active, setActive }: Props) {
  const orders = [
    {
      value: "rubber",
      label: "大 / 橡胶",
      name: "rubber",
      lev: 3,
      id: "rubber",
      number: 999,
      price: 0,
    },
    {
      value: "aa",
      label: "大 / 啊啊",
      name: "aa",
      lev: 3,
      id: "aa",
      number: 0,
      price: 0,
    },
  ];

  const resourceName = {
    singular: "order",
    plural: "orders",
  };

  const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(orders);

  const rowMarkup = orders.map(({ id, number, price, label }, index) => (
    <IndexTable.Row
      id={id}
      key={id}
      selected={selectedResources.includes(id)}
      position={index}
    >
      <IndexTable.Cell></IndexTable.Cell>
      <IndexTable.Cell>
        <div style={{ width: "260px" }}>{label}</div>
      </IndexTable.Cell>
      <IndexTable.Cell>{number}件存货</IndexTable.Cell>
      <IndexTable.Cell>￥{price} CNY</IndexTable.Cell>
    </IndexTable.Row>
  ));

  const [mock, setMock] = useState(Mock);
  //
  const [top, setTop] = useState(1);
  const [title, setTitle] = useState("选择产品");
  const [level, setLevel] = useState(1);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [valueSJ, setValueSJ] = useState("");

  const handleChangeSJ = useCallback(
    (newValue: string) => setValueSJ(newValue),
    []
  );
  //
  const handleQueryClear = () => {
    handleChangeSearch("");
  };
  const [SearchValue, setSearchValue] = useState("");

  const handleChangeSearch = useCallback(
    (newValue: string) => setSearchValue(newValue),
    []
  );
  //
  const [selectedNumber, setSelectedNumber] = useState("CH");
  //
  const [choice, setChoice] = useState([] as string[]);
  //
  const handleChangeTree = (value: any) => {
    console.log(value.label);

    localStorage.setItem(`BACKL${value.lev}`, JSON.stringify(mock));

    localStorage.setItem(`title${value.lev}`, title);

    setLevel(value.lev + 1);

    setTitle(value.label);
    if (value.name == "Mock4") {
      setMock(Mock4);
      setTop(Mock4[0].lev);
    } else if (value.name == "Mock3") {
      setMock(Mock3);
    } else if (value.name == "Mock2") {
      setMock(Mock2);
    } else {
      setMock([]);
    }

    console.log(level);
  };

  const GoBack = () => {
    setTitle(localStorage.getItem(`title${level - 1}`) as string);
    setMock(JSON.parse(localStorage.getItem(`BACKL${level - 1}`) as string));
    setLevel(level - 1);
    setTop(top - 1);
  };

  return (
    <div style={{ zIndex: "200" }}>
      <Modal open={active} noScroll titleHidden onClose={handleChange} title="">
        <div
          style={{
            color: "#303030",
            fontSize: "14px",
            padding: "16px",
            fontWeight: "600",
            height: "52px",
            backgroundColor: "#F3F3F3",
            borderRadius: "20px 20px 0 0",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            zIndex: "999999999999999999",
          }}
        >
          {title === "选择产品" ? (
            <div>{title}</div>
          ) : (
            <div className={styled.XZCP}>
              <div className={styled.Icons} onClick={GoBack}>
                <Icon source={ArrowLeftMinor} color="subdued"></Icon>
              </div>
              <div style={{ marginLeft: "10px" }}>{title}</div>
            </div>
          )}
        </div>
        <div className={top > 2 ? styled.SDKORT : ""}>
          <div>
            <div
              style={{
                alignItems: "stretch",
                borderTop: "1px solid #DFE3E8",
                display: "flex",
                flexDirection: "column",
                justifyContent: "stretch",
                position: "relative",
                width: "100%",
                height: "100%",
                overflow: "hidden",
              }}
            >
              <div
                style={{
                  padding: "16px",
                  borderBottom: "1px solid rgba(0,0,0,0.1)",
                }}
              >
                <TextField
                  clearButton
                  labelHidden
                  label=""
                  placeholder="搜索"
                  autoComplete="off"
                  value={SearchValue}
                  prefix={<Icon source={SearchMinor} />}
                  ariaControls="SearchableListbox"
                  onChange={handleChangeSearch}
                  onClearButtonClick={handleQueryClear}
                />
              </div>
            </div>
            {top !== 3 && (
              <div>
                {mock.length > 0 ? (
                  <div>
                    {mock.map((item, index) => {
                      return (
                        <div
                          className={styled.Lev1}
                          key={index}
                          onClick={() => handleChangeTree(item)}
                        >
                          <div>{item.label}</div>
                          <div>
                            <Icon
                              source={ChevronRightMinor}
                              color="subdued"
                            ></Icon>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <div
                    style={{
                      padding: "12px 16px",
                      borderBottom: "1px solid rgba(0,0,0,0.1)",
                    }}
                  >
                    未找到结果。
                  </div>
                )}
              </div>
            )}
            {top == 3 && (
              <div>
                <IndexTable
                  resourceName={resourceName}
                  itemCount={orders.length}
                  selectedItemsCount={
                    allResourcesSelected ? "All" : selectedResources.length
                  }
                  onSelectionChange={handleSelectionChange}
                  headings={[
                    {
                      title: (
                        <Thumbnail
                          source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
                          size="small"
                          alt="Black choker necklace"
                        />
                      ),
                      id: "thou",
                    },
                    { title: "啊啊", id: "aa" },
                  ]}
                >
                  {rowMarkup}
                </IndexTable>
              </div>
            )}
          </div>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "16px",
          }}
        >
          <div>
            <div style={{ fontSize: "13px" }}>
              {selectedResources.length > 0 ? (
                <Button size="slim">
                  已选择{String(selectedResources.length)}个多属性
                </Button>
              ) : (
                <Button disabled size="slim">
                  已选择 {String(selectedResources.length)} 个多属性
                </Button>
              )}
            </div>
          </div>
          <div
            style={{
              display: "flex",
            }}
          >
            <div>
              <Button
                size="slim"
                onClick={() => {
                  setActive(false);
                }}
              >
                取消
              </Button>
            </div>
            <div style={{ marginLeft: "10px" }}>
              {selectedResources.length > 0 ? (
                <Button size="slim" primary>
                  添加
                </Button>
              ) : (
                <Button size="slim" primary disabled>
                  添加
                </Button>
              )}
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default ModalExample;
